<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全屏滚动的原理是什么？用到了 CSS 的哪些属性？（待深入实践）</title>
<style type="text/css">
</style>
</head>
<body>
<pre>
原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，容器及容
器内的页面取当前可视区高度，同时容器的父级元素overflow属性值设为hidden，通过更改容器可视区的位置来实现全
屏滚动效果。主要是响应鼠标事件，页面通过CSS的动画效果，进行移动。

overflow：hidden；transition：all 1000 ms ease；
详细资料可以参考：<a href="https://blog.csdn.net/liona_koukou/article/details/52680409" rel="nofollow">《js 实现网页全屏切换（平滑过渡），鼠标滚动切换》</a><a href="https://juejin.im/post/5aeef41cf265da0ba0630de0" rel="nofollow">《用 ES6 写全屏滚动插件》</a>
</pre>

<div class="d1">
	<div class="d2"></div>
</div>
<script type="text/javascript">

</script>
</body>
</html>